<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="/statics/js/flexible.js"></script>
    <title>清秀娃娃消券登录</title>
    <link rel="stylesheet" href="/statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="/statics/css/qxww_login_web.css">
</head>
<body>

<div class="container-fluid">
   <!-- <div class="nav text-center">
        <img src="/statics/images/wx_core_back.png" alt="">
        <div>清秀娃娃消券</div>
    </div>-->
    
    <div><img style="width: 100%" src="/statics/images/qxww_login_bgimg.png" alt=""></div>

    <form action="/user/checklogin" method="post" id="qxww_login_form">
        <div>
            <img src="/statics/images/qxww_login_phone.png" alt="手机号">
            <input id="login_phone" name="mobile" type="text" placeholder="输入手机号" maxlength="11"/>
        </div>
        <div>
            <img src="/statics/images/qxww_login_password.png" alt="密码">
            <input id="login_password" name="password" type="password" placeholder="输入密码"/>
        </div>
    </form>
    <div id="login" class="text-center">登录</div>
</div>

<!--登录错误提示  开始-->
<div class="modal fade" tabindex="-1" role="dialog" id="login_modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="close" data-dismiss="modal" aria-label="Close">
                    <img src="/statics/images/sever_close.png" alt="">
                </div>
                <h4 class="modal-title">登录错误</h4>
            </div>
            <div class="modal-body">
                <div id="modal_error">是否确认修补?</div>
            </div>
            <div class="modal-footer clearfix">
                <div class="pull-left" data-dismiss="modal">确定</div>
            </div>
        </div>
    </div>
</div>
<!--登录错误提示  结束-->


<script src="/statics/js/jquery-3.2.1.js"></script>
<script src="/statics/js/bootstrap.min.js"></script>
<script>
	$(document).ready(function () {
		//手机号段验证  正则
		function verify_phone($value) {
			var reg = /(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/;//验证手机号是否符合号段
			if (reg.test($value)) {
				return true; //验证符合
			} else {
				return false; //验证不符合
			}
		}

		//登录  手机号段验证及交互效果
		login_phone_verify();
		function login_phone_verify() {
			var input = $('#login_phone');
			input.on('keyup',function () {
				if( verify_phone( input.val() ) ){
					input.parents('div').removeClass('active');
				}else {
					input.parents('div').addClass('active');
				}
			});
		}

		//修正弹层位置
		function amend_modal_place($modal) {
			var window_width = $(window).width();
			var window_height = $(window).height();
			var width = $modal.width();
			var height = $modal.find('.modal-dialog').height();

			var left = ( window_width - width ) / 2;
			var top  = ( window_height - height ) / 4;

			$modal.css('left',left);
			$modal.css('top',top);
		}

		//点击登录  提交form表单
		login();
		function login() {
			$('#login').on('click',function () {
				if( $('#login_phone').val() && $('#login_password').val() ){
					$.ajax({
						url: '/user/checklogin',
						dataType: 'json',
						type: 'POST',
						data:$('#qxww_login_form').serialize(),
						success: function (data) {
							if(data.code == 0){
								window.location = data.data.url;
							}else if(data.code == 1){
								$('#modal_error').text( data.data );
								amend_modal_place($('#login_modal'));//修正弹层位置
								$('#login_modal').modal({keyboard:false});
							}
						},
						error: function (err) {
							console.log(err);
						}
					});
                }
			});
		}

	});
</script>
</body>
</html>